<template>
	<div class="My">
		<div class="header">
			<van-cell size="large">
				<div slot="icon" class="iconko" @click="fanhui">
					<van-icon name="arrow-left" />
				</div>
				<div slot="title" class="cellbox">订单详情页</div>
			</van-cell>
		</div>
		
		<div class="boxDiz">
					   <div class="icondz"><van-icon name="location-o" size="25px"/></div>
					   <div class="dizhi">
						  <div class="name">{{orderBrr.contact_name}}<span>{{orderBrr.contact_phone}}</span></div>
						  <div class="neir">{{orderBrr.address}}</div>
					   </div>
		</div>
		<div class="biaoq">
			<div>
				<van-panel :title="'订单编号：'" status="代付款">
					<div class="vanflex">
						<div class="vanImg"><img :src="xdimg" /></div>
						<div class="van-wenzi">
							<div class="biaoti">{{tis}}</div>
							<div class="guige">
								<div>规格：{{tlt}}</div>
								<div>x{{orderArr.number}}</div>
							</div>
							<div class="qian">￥{{orderArr.price}}</div>
						
						</div>
					</div>
					<div >
						<van-cell title="配送方式" value="快递 免邮" size="large" />
						<van-cell title="运费险" value="由卖家赠送" size="large" />
						<van-cell title="订单号" size="large" :value="orderArr.order_no"/>
						<van-cell title="下单时间" :value="orderBrr.create_time" size="large" />
						<van-field v-model="orderBrr.remark" label="卖家留言" placeholder="给卖家留言哦" readonly/>
					</div>
					<div class="dingdansp">
						<span>共一件商品</span>
						<span>￥{{orderBrr.total_amount}}</span>
					</div>
			
					<template #footer>
						<div class="footer">
							<van-button size="small" round @click="pingj(orderArr.order_no)">用户评价</van-button>
			
							<van-button size="small" type="danger" round color="#343434">立即付款</van-button>
						</div>
					</template>
				</van-panel>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		Tab,
		Tabs
	} from 'vant';
	import {
		Panel
	} from 'vant';
	import {
		Button,
		SwipeCell,
		Cell,
		CellGroup,
		Card,
		Dialog,
		Rate,
		Popup,
		Field,
		Uploader,
		Toast,
		Icon 
	} from 'vant';
	// 引入tabbar组件
	import TabBar from '../components/tabbar/TabBar.vue'
	import TabBarItem from '../components/tabbar/TabBarItem.vue'
	export default {
		data() {
			return {
				value:'',
				xdimg:'',
				skuid:'',
				tlt:'',
				tis:'',
				orderArr:[],
				orderBrr:[]
			}
		},
		created() {
			// 页面加载结束调用订单详情数据
			this.details()
		
		},
		methods: {
			pingj(order_no) {
				// console.log(order_no)
				this.$router.push({name: 'comment',params:{id:order_no}})
			},
			
			// 请求订单详情数据
			details(){
				this.$axios.get('http://116.63.80.218/orders/info',{
					params:{
						userId:this.$store.state.nameId.userid,
						orderNo:this.$route.params.id
					}
				}).then(res=>{
					// console.log(res)
				    this.orderArr=res.data.items[0].order_no
					this.orderArr=res.data.items[0]
					this.orderBrr=res.data.order[0]
					this.skuid=res.data.items[0].product_sku_id
				     // 调用商品详情数据
					this.$axios.get('http://116.63.80.218/products/info',{
						params:{
							productId:res.data.items[0].product_id
						}
					}).then(res=>{
						// console.log(res)
						this.tis=res.data.product[0].title
						this.xdimg=res.data.product[0].image
						for(let i=0;i<res.data.skus.length;i++){
							if(res.data.skus[i].id==this.skuid){
								this.tlt=res.data.skus[i].title
							
							}
						}
						// console.log(res.data.skus)
					}).catch(err=>{
						console.log(err)
					})
				}).catch(err=>{
					console.log(err)
				})
			},
			fanhui() {
				// this.$router.push({path:'/queren'})
				this.$router.go(-1)
			},



		},
		components: {
			[Tab.name]: Tab,
			[Tabs.name]: Tabs,
			[Panel.name]: Panel,
			[Button.name]: Button,
			[SwipeCell.name]: SwipeCell,
			[Cell.name]: Cell,
			[CellGroup.name]: CellGroup,
			[Card.name]: Card,
			[Dialog.name]: Dialog,
			[Rate.name]: Rate,
			[Popup.name]: Popup,
			[Field.name]: Field,
			[Uploader.name]: Uploader,
			[Toast.name]: Toast,
			[Icon.name]: Icon,
			TabBar,
			TabBarItem
		}
	}
</script>
<style lang="less" scoped>
	@width: 100vw;
	@display: flex;
	@margin: 0 auto;
	@wid90: 90vw;
	@padding: 0 17px;

	.My {
		width: @width;
		height: 100vw;
		background-color: #F9F9F9;
	}

	.header .van-cell {
		box-shadow: 0 1px 1px rgba(100, 100, 100, 0.2);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
			
	}

	.cellbox {
		font-size: 15px;
		text-align: center;
	
	}

	.iconko {
		font-size: 20px;
	}
	.boxDiz{width:100vw;height: 70px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 20px;
	box-sizing: border-box;
    border-bottom: 1px solid #f6f6f6;
	margin-top: 50px;
	background-color: white;
	  .icondz{
		  flex: 1;
		  // border: 1px solid;
		  text-align: center;
		  
	  }
	  .dizhi{
		  flex:9;
		  font-size: 13px;
		  .name{font-weight: bold;
		   >span{
			   color: #999999;
			   font-weight: normal;
			   margin-left: 10px;
		   }
		  }
	  }
	}

	.biaoq {
		// margin-top: 45px;
		// padding-bottom: 100px;

		/deep/.van-cell {
			border: none;
		}

		.vanflex {
			width: @width;
			height: 135px;
			display: flex;
			justify-content: space-between;
			padding: @padding;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(100, 100, 100, 0.05);

			.vanImg {
				flex: 1;

				img {
					width: 100%;
					height: 130px;
					border-radius: 5px;
				}
			}

			.van-wenzi {
				flex: 2;
				padding-left: 15px;
				margin-top: 5px;

				.biaoti {
					font-size: 15px;
					font-weight: bold;
				}

				.guige {
					height: 50px;
					display: flex;
					align-content: center;
					justify-content: space-between;
					margin-top: 10px;
					color: #999999;
					font-size: 14px;
				}

				.qian {
					color: #A8896D;
					font-weight: bold;
					font-size: 17px;
					margin-top: -2px;
				}
			}
		}
	}

	.dingdansp {
		height: 50px;
		display: flex;
		justify-content: space-between;
		padding: @padding;
		box-sizing: border-box;
		align-items: center;
		font-weight: bold;
		font-size: 14px;
	}

	.footer {
		text-align: right;
		height: 50px;
		line-height: 40px;
	}

	
	.pingjbxo {
		width: 100vw;
		height: 70vw;
		background-color: white;
		padding: 0 10px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		justify-content: center;

		.header-ms {
			height: 40px;
			display: flex;
			align-items: center;
			margin-bottom: 10px;

		}

		.jianj {
			height: 100px;
			border: 1px solid #f7f7f7;
			margin-bottom: 15px;
		}

		.tupian {
			height: 90px;

		}
	}

	.kuijiBtn {
		width: 70vw;
		margin: 30px auto;
	}
</style>
